<template>
  <view class="box">
    <view class="item" v-for="(item, index) in list" :key="index">
      <!-- <i class="icon el-icon-s-order" style="background: rgb(129, 157, 205)"></i> -->
      <i :class="'icon ' + item.icon" :style="{ background: item.color }"></i>
      <view class="right">
        <view class="tit">
          <text style="margin-right: 4px">{{ item.title }}</text>
          <el-tooltip
            :content="item.content"
            placement="right-end"
            effect="dark"
          >
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </view>
        <animate-number
          ref="now"
          class="money"
          :from="item.value2"
          :to="item.value"  
          duration="1000"
          easing="easeOutQuad"
          :formatter="formatter"
          :key="item.value"
        />
        <text :class="per(item.value, item.value2) >= 0 ? 'roll2' : 'roll'"
          >{{ per(item.value, item.value2) }}%
          <i
            class="el-icon-caret-bottom"
            style="color: #67c23a"
            v-if="per(item.value, item.value2) < 0"
          ></i>
          <i
            class="el-icon-caret-top"
            style="color: #ed4014"
            v-if="per(item.value, item.value2) >= 0"
          ></i
        ></text>
      </view>
    </view>
  </view>
</template>

<script>
var vk = uni.vk;
export default {
  data() {
    return {
      all_area: 0,
      now_area: 0,
      all_order: 0,
      now_order: 0,
      all_pay: 0,
      now_pay: 0,
      all_time: 0,
      now_time: 0,
      all_way: 0,
      now_way: 0,
      all_back: 0,
      now_back: 0,
      list: [
        {
          icon: "vk-icon-sponsor",
          color: "#1890ff",
          title: "营业额",
          content:
            "在选定条件下，商品支付金额、充值金额（后续预留）、购买付费会员金额（后续预留）、线下收银金额（后续预留）",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-moneybagfill",
          color: "#00c050",
          title: "交易净收入金额",
          content: "在选定条件下，交易净收入金额 = 营业额 - 支出金额",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-cart_fill_light",
          color: "#ffab2b",
          title: "商品支付金额",
          content:
            "选定条件下，用户购买商品的实际支付金额，包括微信支付、余额支付、支付宝支付、线下支付金额",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-order",
          color: "#b37feb",
          title: "充值金额",
          content:
            "选定条件下，用户成功充值的金额，只包含用户使用支付宝和微信充值的金额（后续预留）",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-pay",
          color: "#1890ff",
          title: "支出金额",
          content: "在选定条件下，余额支付金额、支付佣金金额、商品退款金额",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-ticket_money_fill",
          color: "#00c050",
          title: "余额支付金额",
          content: "在选定条件下，用户下单时使用余额实际支付的金额",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-moneybag",
          color: "#ffab2b",
          title: "支付佣金金额",
          content: "平台给业务员支付的推广佣金，以实际到账为准",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-refund",
          color: "#b37feb",
          title: "商品退款金额",
          content: "在选定条件下，用户成功退款的商品金额",
          value: 0,
          value2: 0,
        },
      ],
    };
  },
  methods: {
    per(a, b) {
      if (a == 0 && b == 0) return 0;
      if (a == 0) return -100;
      if (b == 0) return 100;
      return (((a - b) / b) * 100).toFixed(2);
    },
    formatter: function (num) {
      //判断num是否是小数
      if (num % 1 === 0) {
        //不是小数
        return num;
      }
      //是小数
      return num.toFixed(2);
    },
    async init(time) {
      const res = await vk.callFunction({
        url: "admin/business/kh.stats.detailOrderView",
        data: { time },
      });
      this.list = res.list;
      this.$emit("comp");
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  padding: 20px 16px 0 16px;
  display: flex;
  flex-wrap: wrap;
}

.item {
  display: flex;
  width: 25%;
  margin-bottom: 24px;
  .icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #409eff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .right {
    display: flex;
    margin-left: 14px;
    flex-direction: column;
    font-size: 14px;
    color: #666;
    .money {
      color: #333;
      font-size: 30px;
    }
    .roll {
      font-style: italic;
      font-size: 12px;
      color: #67c23a;
    }
    .roll2 {
      font-style: italic;
      font-size: 12px;
      color: #ed4014;
    }
    .roll::before {
      content: "环比减少：";
      font-style: normal;
      font-size: 14px;
      color: #666;
    }
    .roll2::before {
      content: "环比增长：";
      font-style: normal;
      font-size: 14px;
      color: #666;
    }
  }
}
</style>
